<template>
  <el-container>
    <div style="padding: 10px;padding-bottom: 0">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex;align-items: center">
          <div class="report_header_left"></div>
          <div style="width: 800px;display: flex;align-items: center;">
            <div class="report_header_date">
              <el-date-picker
                v-model="query.date"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div class="report_header_query" style="">
              <queryShop @queryShopClick='queryShopClick'></queryShop>
            </div>

            <div class="report_header_query">
              <el-select v-model="memberName" value-key="id" clearable placeholder="客户"
                         filterable @focus="getMemberList" @change="selectMember" :filter-method="queryMember" style="width: 100%">
                <el-option v-for="item in memberIdOptions"  style="width: 600px;"  :key="item.id" :label="item.name" :value="item">
                  <div style="display: flex">
                    <span style="width: 60px;">{{item.code}}</span>
                    <span style="float: left;width: 100px;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 8px;width: 80px;margin-left: 10px">{{ item.mobile }}</span>
                    <div style="width: 200px;">
                      <span style="color: #8492a6; font-size: 8px;">{{item.address}}</span>
                    </div>
                  </div>
                </el-option>
                <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                  <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                  <div class="elOption" @click="toSearchMember">搜索客户</div>
                </div>
                <div style="height: 30px"></div>
              </el-select>
            </div>

          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
            <div
              style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
              <div class="report_header_query">
                <el-input placeholder="客户编号/订单号/收货地址" v-model="query.information" clearable style="width: 100%"></el-input>
              </div>

            </div>
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary" @click="queryClick">查询
            </el-button>
			<el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary" @click="addClick" v-permission="['askfor.add']">新增
			</el-button>
            <!--            隐藏显示按钮-->
            <!--            <div @click="chooseClick" style="width: 46px;height: 32px;background-color: #409EFF;margin-top: 7px;margin-left: 10px;border-radius: 4px;display: flex;justify-content: center;align-items: center;">-->
            <!--              <i style="font-size: 24px;color: white;" :class="[queryType == false?'el-icon-caret-bottom':'el-icon-caret-top']"></i>-->
            <!--            </div>-->
          </div>
        </div>
        <div style="width: 800px;display: flex;align-items: center;" v-show="queryType == true">
          <!--          这是放隐藏条件的容器-->
        </div>
      </div>
    </div>
    <div class="pd10">
      <el-tabs type="border-card" @tab-click="tabsClick" :style="{height:curHeight+'px'}">
        <el-tab-pane label="全部">
          <div class="details_card" v-loadMore="[payLoads,'askfor-list0']" :style="{height:tabsHeight+'px'}">
            <askforList :orderForm="orderForm" @detailsClick="detailsClick"></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane >
           <span slot="label">
          <span class="span-box">
            <span>待确认</span>
              <span class="btn-bell-badge" v-if="askforconfirm>0">
                <span class="num">{{askforconfirm}}</span>
              </span>
          </span>
        </span>
          <div class="details_card" v-loadMore="[payLoads,'askfor-list1']" :style="{height:tabsHeight+'px'}">
            <askforList :orderForm="orderForm" @detailsClick="detailsClick"></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane >
          <span slot="label">
          <span class="span-box">
            <span>已同意</span>
              <span class="btn-bell-badge" v-if="askforagreen>0">
                <span class="num">{{askforagreen}}</span>
              </span>
          </span>
        </span>
          <div class="details_card" v-loadMore="[payLoads,'askfor-list2']" :style="{height:tabsHeight+'px'}">
            <askforList :orderForm="orderForm" @detailsClick="detailsClick"></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已寄回">
               <span slot="label">
          <span class="span-box">
            <span>已寄回</span>
              <span class="btn-bell-badge"  v-if="askfortree>0">
                <span class="num">{{askfortree}}</span>
              </span>
          </span>
        </span>
          <div class="details_card" v-loadMore="[payLoads,'askfor-list3']" :style="{height:tabsHeight+'px'}">
            <askforList :orderForm="orderForm" @detailsClick="detailsClick"></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待退款">
         <span slot="label">
          <span class="span-box">
            <span>待退款</span>
              <span class="btn-bell-badge"  v-if="askforfor>0">
                <span class="num">{{askforfor}}</span>
              </span>
          </span>
        </span>
          <div class="details_card" v-loadMore="[payLoads,'askfor-list4']" :style="{height:tabsHeight+'px'}">
            <askforList :orderForm="orderForm" @detailsClick="detailsClick"></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已退款">
          <div class="details_card" v-loadMore="[payLoads,'askfor-list5']" :style="{height:tabsHeight+'px'}">
            <askforList :orderForm="orderForm" @detailsClick="detailsClick"></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已取消">
          <div class="details_card" v-loadMore="[payLoads,'askfor-list6']" :style="{height:tabsHeight+'px'}">
            <askforList :orderForm="orderForm" @detailsClick="detailsClick"></askforList>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      title="双击选择客户"
      :visible.sync="memberTableVisible"
      width="950px"
      v-el-drag-dialog
      append-to-body
      :before-close="memberTableClose">
      <div style="position: relative;">
        <member-table :key="times" @memberDouble="memberDouble" @memberTableClose="memberTableClose"></member-table>
      </div>
    </el-dialog>
    <el-footer class="el-footerBox">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadOrder" style="margin-bottom: auto"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import queryShop from '@/components/Query/queryShop'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import memberTable from '@/components/MemberTable/index'
  import askforList from './components/list'
  import Pagination from '@/components/Pagination';
  import {EventBus} from '@/api/eventBus'
  import {list,count} from '@/api/askfor'
  import loadMore from '@/utils/more.js'
  import { list as memberList } from '@/api/member'
  import { getInfo, list as sysMchList } from '@/api/sysMch'
  import utils from '../../utils/utils.js'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  export default {
    components: {askforList, Pagination,memberTable,queryShop},
    name: 'askfor-list',
    directives: {loadMore,elDragDialog,permission},
    activated() {
      this.payLoads = new Date().getTime();
    },
    data() {
      return {
        tagindex:'',
        askforconfirm:0,
        askforagreen:0,
        askfortree:0,
        askforfor:0,
        pageNum: 1,
        orderForm: [],
        pageSize: 20,
        memberName:'',
        times:'',
        curHeight: null,
        tabsHeight:null,
        total: 0,
        payLoads: '',
        mchType:'',
        memberTableVisible:false,
        queryType: false,
        memberIdOptions: [],
        mchIdOptions:[],
        status:'',
        query: {
          shippingMethod: '',
          date: [],
          information: '',
          memberId: '',

          shopId:''
        },
        keyword: {
          shippingMethod: '',
          date: [],
          information: '',
          memberId: '',

          shopId:''
        },
        pickerOptions: {//时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    methods: {
      countclickfor(){
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize', this.pageSize);
        params.append('status',3);
        params.append('startDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[0]);
        params.append('endDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[1]);
        params.append('keyword',this.keyword.information)
        params.append('memberId',this.keyword.memberId)
        params.append('shopId',this.keyword.shopId)
        count(params).then(res=>{
          this.askforfor=res.data
        })
      },
      countclicktree(){
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize', this.pageSize);
        params.append('status',2);
        params.append('startDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[0]);
        params.append('endDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[1]);
        params.append('keyword',this.keyword.information)
        params.append('memberId',this.keyword.memberId)
        params.append('shopId',this.keyword.shopId)
        count(params).then(res=>{
          this.askfortree=res.data
        })
      },
      countclicktwo(){
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize', this.pageSize);
        params.append('status',1);
        params.append('startDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[0]);
        params.append('endDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[1]);
        params.append('keyword',this.keyword.information)
        params.append('memberId',this.keyword.memberId)
        params.append('shopId',this.keyword.shopId)
        count(params).then(res=>{
          this.askforagreen=res.data
        })
      },
      countclick(){
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize', this.pageSize);
        params.append('status',0);
        params.append('startDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[0]);
        params.append('endDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[1]);
        params.append('orderSn',this.keyword.orderSn)
        params.append('memberId',this.keyword.memberId)
        params.append('memberMobile', this.keyword.memberMobile)
        params.append('phone',this.keyword.phone)
        params.append('shopId',this.keyword.shopId)
        count(params).then(res=>{
          this.askforconfirm=res.data
        })
      },
       queryShopClick(data){
        console.log(data)
        this.query.shopId = data.shopId
      },
      addClick(){
        this.$router.push({
          path: '/askfor/add'
        })
      },
      memberDouble(data){
        this.memberName=data.name
        this.query.memberId=data.id
        this.memberTableVisible = false
      },
      memberTableClose(){
        this.memberTableVisible = false
      },
      toSearchMember() {
        this.memberTableVisible = true
      },
      loadOrder() {
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize', this.pageSize);
        params.append('status', this.status);
        params.append('startDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[0]);
        params.append('endDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[1]);
        params.append('keyword',this.keyword.information)
        params.append('memberId',this.keyword.memberId)
        params.append('shopId',this.keyword.shopId)
        list(params).then(response => {
          this.orderForm = response.data.data
          this.total=response.data.total
        })
      },
      queryMember (query) { // 搜索客户
        console.log(query)
        this.memberIdOptions = []
        memberList({keyword: query}).then(res => {
          res.data.data.forEach((option, index) => {

            this.$set(this.memberIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      selectMember(data){
        if (!utils.isNull(data)){
          this.memberName=data.name
          this.query.memberId=data.id
        }else {
          this.query.memberId=''
        }
      },
      getMemberList () { // 加载客户
        memberList().then(res => {
          res.data.data.forEach((option, index) => {

            this.$set(this.memberIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      queryClick() {
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadOrder()
        // this.countclick()
        // this.countclicktwo()
        // this.countclicktree()
        //     this.countclickfor()
        // if(this.tagindex=="1"){
        //     this.countclick()
        // }else if(this.tagindex=="2"){
        //  this.countclicktwo()
        // }
        // else if(this.tagindex=="3"){
        //   this.countclicktree()
        // }
        // else if(this.tagindex=="2"){
        //   this.countclickfor()
        // }
      },
      resetClick() {
        this.query.date = [];
        this.query.shippingMethod = '';
        this.memberName='';
        this.query.keyword = '';
        this.query.memberId = '';
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadOrder()
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == true) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 311//减去页面上固定高度height
          this.tabsHeight = h - 381
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 224//减去页面上固定高度height
          this.tabsHeight = h-294
        }
      },
      detailsClick(data) {
        this.$router.push({
          path: '/askfor/view', query: {id: data}
        })
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == true) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 311//减去页面上固定高度height
              _this.tabsHeight = h - 381
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 224//减去页面上固定高度height
              _this.tabsHeight = h - 294
            }
          })();
        };
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 224//减去页面上固定高度height
        this.tabsHeight = h-294
      },
      tabsClick(data) {
        var _this = this
        console.log(data)
        this.tagindex=data.paneName
        switch (data.paneName) {
          case '0':
            console.log(data.paneName)
            _this.status = ''; // 付款状态
            break;
          case '1':
            console.log(data.paneName)
            _this.status = 0; // 付款状态
            // this.countclick()
            break;
          case '2':
            _this.status = 1; // 付款状态
            //  this.countclicktwo()
            break;
          case '3':
            _this.status = 2; // 付款状态
            //  this.countclicktree()
            break;
          case '4':
            _this.status = 3; // 付款状态
            //  this.countclickfor()
            break;
          case '5':
            _this.status = 4; // 付款状态
            break;
          case '6':
            _this.status = 5; // 付款状态
            break;
        }
        this.loadOrder()
      }
    },
    created() {
      this.countclick()
      this.countclicktwo()
      this.countclicktree()
      this.countclickfor()
      this.loadSysmch('')
      this.loadMch()
      this.loadOrder()
      EventBus.$on('askfor-edit', res => { // 监听状态更新
        // 更新列表数组
        this.loadOrder()
        /* for (var i = 0; i < this.orderForm.length; i++) {
          if (this.orderForm[i].id == res.id) {
            this.$set(this.orderForm, i, res)
          }
        } */
      })
      EventBus.$on('askfor-list', res => { // 监听新增完毕
        // 更新列表数组
        // _this.orderForm.splice(0, 0, res)
        console.log('我进来并刷新了')
        this.loadOrder()
      })
    },
    mounted() {
      this.comeIn();
      this.beforeMount()
    },
  }
</script>

<style scoped>
  .details_card {
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
  }
  .el-input__inner {
    width: 100% !important;
  }
  .elOption{
    background-color: #909399;
    color:white ;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }
  .details_card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/ .el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    flex-direction: column;
  }

  .report_header_left {
    width: 5px;
    height: 46px;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }

  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
    .span-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;}
    .btn-bell-badge {
      width: 26px;
      height: 18px;
      margin-left:5px;
      line-height:18px;
      border-radius:15px;
      background:#ed4014;}
      .num {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #fff;
      }
</style>
